<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用element-ui之前要先引入vue，他是基于vue的-->
    <script src="js/vuejs-2.5.16.js"></script>
    <!--引入element-ui的样式-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!--引入element-ui的js文件-->
    <script src="element-ui/lib/index.js"></script>
    <!--引入axios-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <!--
        用于添加以及修改的弹出框
        :visible.sync="dialogFormVisible" 用来控制dialog窗口是否显示。
    -->
    <el-dialog title="角色信息" :visible.sync="dialogFormVisible" @open="findPermissions">
        <el-form :model="role">
            <el-form-item label="角色名" >
                <el-input v-model="role.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" >
                <el-input v-model="role.description" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="分配权限" >
                <el-select v-model="role.permissionIds" multiple placeholder="请选择权限">
                    <el-option
                            v-for="permission in permissions"
                            :label="permission.name"
                            :value="permission.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="doAddOrEdit">确 定</el-button>
        </div>
    </el-dialog>

    <div style="float: right">
        <el-button @click="toAdd" type="success">添加按钮</el-button>
    </div>
    <!--
        :data：表示表格绑定的数据
    -->
    <el-table
            :data="pagination.list"
            style="width: 100%">
        <!--prop数组中对象的属性名，label是显示的内容-->
        <el-table-column
                prop="name"
                label="角色名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="description"
                label="角色描述">
        </el-table-column>
        <el-table-column label="角色描述">
            <template slot-scope="scope">
                <el-tag v-for="permission in scope.row.permissions">{{permission.name}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="180">
            <template slot-scope="scope">
                <!--
                    scope.row 表示当前行的对象
                    scope.row.id 表示当前行对象的id
                -->
                <el-button
                        @click="toEdit(scope.row.id)"
                        size="mini">编辑</el-button>
                <el-button
                        @click="doDelete(scope.row.id)"
                        size="mini"
                        type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--
        在表格下面放置分页组件
        @size-change:在修改每页显示大小时执行的函数
        @current-change：选中页码变化的时候会会执行的函数
        :current-page= 当前选中的页码
        :page-sizes： 每页大小的选择框中的内容
        :page-size: 每页大小
        :total="400"总数量
        layout="total, sizes, prev, pager, next, jumper" 布局

    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pageNum"
            :page-sizes="[3, 5, 8, 10]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
</div>
</body>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            roles: [],
            //分页使用的数据，该对象会封装分页查询到的数据，以及页码等数据
            pagination: {
                pageNum: 1,//当前页码
                pageSize: 5, //每页大小
                list: [], //保存数据的数组
                totalCount: 0 //总数据条数【随便写一个】
            },
            //用于绑定添加以及修改角色的信息对象
            role: {},
            //用来控制添加以及修改的dialog是否显示
            dialogFormVisible: false,
            //用来决定dialog弹框是添加还是修改【true表示添加，false表示修改】
            addOrEdit: true,
            permissions:[]
        },
        methods: {
            //分页查询
            findByPage() {
                //定义url
                let url = 'role?action=findByPage&pageNum=' + this.pagination.pageNum + '&pageSize=' + this.pagination.pageSize;
                //发送ajax异步请求
                axios.get(url).then(resp => {
                    //获取响应数据
                    let result = resp.data;
                    //判断如果成功，进行赋值
                    if (result.success) {
                        //将数据【pagebean】赋值给pagination
                        this.pagination = result.obj;
                    } else {
                        //如果失败，弹框
                        alert(result.message);
                    }
                });
            },

            //通过添加修改的弹窗执行加载时回调函数
            findPermissions(){
              axios("/permission?action=findAll").then(resp => {
                this.permissions = resp.data.obj;
              })

            },
            //分页时，每页大小改变调用的方法
            handleSizeChange(pageSize) {
                //修改分页数据模型中的每页大小
                this.pagination.pageSize = pageSize;
                //重新分页查询
                this.findByPage();
            },
            //分页时，页码变化执行的函数
            handleCurrentChange(pageNum) {
                //将数据模型中的页码进行改变
                this.pagination.pageNum = pageNum;
                //重新进行分页查询
                this.findByPage();
            },
            //去添加的方法
            toAdd() {
                //将dialog标记改成添加的标记【true】
                this.addOrEdit = true;
                //把role对象的内容情况
                this.role = {};
                //弹出dialog窗口
                this.dialogFormVisible = true;
            },
            //执行添加的方法
            doAdd() {
                //定义url
                let url = 'role?action=save';
                alert()
                //发送请求
                axios.post(url, this.role).then(resp => {
                    //获取服务器响应的数据
                    let result = resp.data;
                    //判断
                    if (result.success) {
                        //添加成功，重新查询r
                        this.findByPage();
                        //关闭弹出框
                        this.dialogFormVisible = false;
                    } else {
                        alert(result.message);
                    }
                });
            },
            //根据id查询
            findById(id) {
                //定义url
                let url = 'role?action=findById&id=' + id;
                //发送请求
                axios.get(url).then(resp => {
                    //接收服务器回复过来的数据
                    let result = resp.data;
                    //判断是否成功
                    if (result.success) {
                        //如果成功了，将查询到的数据赋值给数据模型中的role
                        this.role = result.obj;
                        this.role.permissionIds = this.role.permissions.map(permission => permission.id);
                    } else {
                        //弹框
                        alert(result.message);
                    }
                });
            },
            //去修改
            toEdit(id) {
                //将dialog窗口的标记改成false表示在进行修改
                this.addOrEdit = false;
                //先根据id查询该角色
                this.findById(id);
                //弹框
                this.dialogFormVisible = true;
            },
            //执行添加或者修改【取决于addOrEdit标记，如果是true就执行添加，如果是false就执行修改】
            doAddOrEdit() {
                if (this.addOrEdit) {
                    //如果标记是true，执行添加
                    this.doAdd();
                } else {
                    //如果标记是false，就执行修改
                    this.doEdit();
                }
            },
            //执行修改操作
            doEdit() {
                //定义url
                let url = 'role?action=update';
                //发送请求去修改
                axios.post(url, this.role).then(resp => {
                    //接收服务器回复的数据
                    let result = resp.data;
                    //判断
                    if(result.success) {
                        //成功，重新查询数据
                        this.findByPage();
                        //关闭弹出框
                        this.dialogFormVisible = false;
                    } else {
                        //弹框提示
                        alert(result.message);
                    }
                });
            },
            //删除
            doDelete(id) {
                //定义url
                let url = 'role?action=delete';
                //定义参数部分
                let params = 'id=' + id;
                //发送异步请求
                axios.post(url, params).then(resp => {
                    //获取数据部分
                    let result = resp.data;
                    //判断并处理
                    if (result.success) {
                        //重新查询
                        this.findByPage();
                    } else {
                        //提示
                        alert(result.message);
                    }
                })
            }
        },
        created() {
            //分页查询
            this.findByPage();
        }
    });
</script>
</html>